<template>
  <div id="tablebox" class="rightBodyContent">
    <div class="rightBodyContent-in" style="overflow-y: auto;height: calc(100vh - 140px);">
      <tips optionTemplate="realTimeCorner"></tips>
<!--      <p class="titlefoodTitle"><span>当前账号：<i-->
<!--          class="name">{{ userInfomation ? userInfomation.realname : '-&#45;&#45;' }}</i>（实时区角个数：{{ listOption.length }}）架构人展示区角总预约人数，老师展示本班学生预约人数，区角预约数为0不展示，本班未预约不展示</span>-->
<!--      </p>-->
      <div v-if="listOption.length">
        <div class="commont-body-star">
          <template v-for="(item,index) in listOption">
            <div class="commont-body-star-list-out active-box-body" @click="showActiveDetail(index)">
              <div class="commont-body-star-list">
                <div class="corner-line-img"
                     :style="{backgroundImage:'url('+item.pic+')',backgroundSize:'cover',backgroundPosition:'center'}">
                </div>
                <p class="food-title-name">{{ item.name }}</p>
                <p class="active-number">
                  <i class="iconfont iconhrrenshirenshiguanli380"></i><span>今日预约人数：<i>{{ item.use_number }}</i></span>
                </p>
                <p class="active-number" v-if="!userInfo.type || userInfo.type==1">
                  <i class="iconfont iconyiyuankaohe"></i><span>本班预约人数：<i>{{ item.class_number }}</i></span>
                </p>
                <p class="active-checkname">查看详情</p>
              </div>
            </div>
          </template>
        </div>
      </div>
      <div v-else class="cornerNothing">
        <div class="iconfont iconmeiyougengduo iconline"></div>
        <p class="iconlineTxt">未找到相应数据/区角未有预约信息</p>
      </div>
    </div>
    <cornerDetail :visible.sync="cornerVisible" :detail="corner_Option"></cornerDetail>
  </div>
</template>

<script>
import cornerDetail from "./newCorner/cornerDetail";
import {mapGetters} from "vuex";

export default {
  components: {
    cornerDetail
  },
  data() {
    return {
      cornerVisible: false,
      showCommont: [],
      oldData: [],
      showId: null,
      section_id: '',
      class_id: '',
      flag: true,
      realname: '',
      countUser: 0,
      timer: '',
      timeNumber: 0,
      cornerLine: [],
      corner_Option: null,
      listOption: []
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  watch: {
  },
  created() {
    this.getInitFn()
  },
  methods: {
    async getInitFn() {
      let data = await this.$fetch(this.api.corner.index, {p: 0}); //类型0游客1家长2老师
      console.log('qujiaoliebiao:', data)
      let a = []
      for (let item of data.list) {
        if (item.use_number) {
          a.push(item)
        }
      }
      this.cornerLine = data.list
      this.listOption = JSON.parse(JSON.stringify(a))
      console.log('qujiaoliebiao:', data)
    },
    // 需要发送sockt 设备号mac type类型 区分手环后台推送 1 facility_code
    showActiveDetail(index) {
      let a = {
        name: this.listOption[index].name,
        use_number: this.listOption[index].use_number,
        facility_code: this.listOption[index].facility_code,
        corner_id: this.listOption[index].id
      }
      this.corner_Option = JSON.stringify(a);
      this.cornerVisible = true;
      // this.$router.push('/CornerDetail?detail=' + JSON.stringify(a))
    }
  },
  beforeDestroy() {
    clearInterval(this.timer) // 关闭
  },
  mounted() {
  }
}
</script>

<style scoped>
.commont-body-star-list-out {
  padding: 10px 0;
}

.corner-line-img {
  width: 100%;
  height: 190px;
}

.active-number {

}
</style>
